<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>资料录入</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../lib/sui/sm.min.css">
    <link rel="stylesheet" href="../lib/sui/sm-extend.min.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/public_main.css">
</head>

<body>
    <div class="page-group">
        <div class="page page-current" id="filerecord">

            <!-- 主内容 -->
            <div class="content">
                <div class="setp-card">
                    <div class="step-box">
                        <div :class="(item.index<=currentStep)?'step-item selected':'setp-item'" v-for="item in steps"
                            :style="{width:getStepWidth()}">
                            <div class="step-item-line">
                                <span></span>
                            </div>
                            <div class="step-item-text size-65">{{item.name}}</div>
                        </div>
                    </div>
                    <div class="size-65 text-c">
                        以下资料作为法律责任依据请如实填写，<span class="blue">查看模版>></span>
                    </div>
                </div>
                <div class="bs-box" v-if="currentStep===0">
                    <div class="bs-box-content">
                        <div class="bs-box-inner">
                            <div class="bs-box-content-item">
                                <p class="size-m">保单号</p>
                                <div>
                                    <input class="size-m" type="text" placeholder="请填写保单号" />
                                </div>
                            </div>
                            <div class="bs-box-content-item">
                                <p class="size-m">报案号</p>
                                <div>
                                    <input class="size-m" type="text" placeholder="请填写报案号" />
                                </div>
                            </div>
                            <div class="bs-box-content-item width-link size-m border-b-none">
                                <div>出险险种</div>
                                <div>
                                    <input placeholder="请选择险种" id="picker"/>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="bs-box" v-if="currentStep===1">
                    <div class="bs-box-content">
                        <div class="bs-box-inner">
                            <div class="bs-box-content-item width-link size-m">
                                <div>货品类别</div>
                                <div>
                                    <input placeholder="请选择货品类别" />
                                </div>
                            </div>
                            <div class="bs-box-content-item">
                                <p class="size-m">货品名称</p>
                                <div>
                                    <input class="size-m" type="text" placeholder="请填写货品名称" />
                                </div>
                            </div>
                            <div class="bs-box-content-item">
                                <p class="size-m">联系数量与规格</p>
                                <div>
                                    <input class="size-m" type="text" placeholder="请填写联系数量与规格" />
                                </div>
                            </div>
                            <div class="bs-box-content-item size-m width-link">
                                <div>物品原值</div>
                                <div>
                                    <input placeholder="请填写" />
                                </div>
                                <div>万元</div>
                            </div>
                            <div class="bs-box-content-item size-m width-link">
                                <div>评估价</div>
                                <div>
                                    <input placeholder="请填写" />
                                </div>
                                <div>万元</div>
                            </div>
                            <div class="bs-box-content-item size-m">
                                <div class="red">注：评估价将作为起拍价使用</div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="bs-box" v-if="currentStep===2">
                    <div class="bs-box-content">
                        <div class="bs-box-inner">
                            <div class="bs-box-content-item width-link size-m">
                                <div>受损时间</div>
                                <div>
                                    <input placeholder="请选择受损时间" />
                                </div>
                            </div>
                            <div class="bs-box-content-item">
                                <p class="size-m">受损原因</p>
                                <div>
                                    <textarea class="size-m no-outline" placeholder="请输入受损原因" rows="3" style="width:100%;padding-right:.5rem;"></textarea>
                                </div>
                            </div>
                            <div class="bs-box-content-item width-link border-b-none">
                                <p class="size-m">货品所在地</p>
                                <div>
                                    <input class="size-m" type="text" placeholder="请选择省市区" />
                                </div>
                            </div>
                            <div class="bs-box-content-item">
                                <input class="size-m" type="text" placeholder="详细门牌地址" />
                            </div>
                            <div class="bs-box-content-item size-m width-link">
                                <div>物品原值</div>
                                <div>
                                    <input placeholder="请填写" />
                                </div>
                                <div>万元</div>
                            </div>
                            <div class="bs-box-content-item border-b-none">
                                <p class="size-m">第三方报告(选填)</p>
                                <div class="uploader">
                                    <div class="uploader-content">
                                        <div class="uploader-input-box">
                                            <input class="uploader-input" type="file" accept="image/*" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="bs-box" v-if="currentStep===3">
                    <div class="bs-box-content">
                        <div class="bs-box-inner">
                            <div class="bs-box-content-item width-link size-m">
                                <div>货品在</div>
                                <div>
                                    <input placeholder="请选择受损时间" />
                                </div>
                                <div>时的现状情况</div>
                            </div>
                            <div class="bs-box-content-item">
                                <p class="size-m">货品清单(限doc,xlsx,pdf)</p>
                                <div class="uploader">
                                    <ul class="uploader-files" id="uploader-files">
                                        <li class="uploader-file" style="background-image:url('http://temp.im/288x288/FF9500/000')">
                                            <span class="close">x</span>
                                        </li>
                                    </ul>
                                    <div class="uploader-content">
                                        <div class="uploader-input-box">
                                            <input class="uploader-input" type="file" accept="image/*" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bs-box-content-item">
                                <p class="size-m">货品现状描述</p>
                                <div>
                                    <textarea class="size-m no-outline" placeholder="请输入受损原因" rows="3" style="width:100%;padding-right:.5rem;"></textarea>
                                </div>
                            </div>
                            <div class="bs-box-content-item border-b-none">
                                <p class="size-m">上传照片或视频</p>
                                <div class="uploader">
                                    <div class="uploader-content">
                                        <div class="uploader-input-box">
                                            <input class="uploader-input" type="file" accept="image/*" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="bs-box" v-if="currentStep===4">
                    <div class="bs-box-content">
                        <div class="bs-box-inner">
                            <div class="bs-box-content-item width-link size-m">
                                <div>要求在</div>
                                <div>
                                    <input placeholder="请选择时间" />
                                </div>
                                <div>处置完成</div>
                            </div>
                            <div class="bs-box-content-item">
                                <p class="size-m">物权单位</p>
                                <div>
                                    <input class="size-m" type="text" placeholder="请填写单位名称" />
                                </div>
                            </div>
                            <div class="bs-box-content-item">
                                <p class="size-m">联系人</p>
                                <div>
                                    <input class="size-m" type="text" placeholder="请填写联系人名称" />
                                </div>
                            </div>
                            <div class="bs-box-content-item">
                                <p class="size-m">手机号</p>
                                <div>
                                    <input class="size-m" type="text" placeholder="请填写手机号" />
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="bs-box" v-if="currentStep===5" style="background:#fff;">
                    <div class="bs-box-content">
                        <div class="bs-box-inner">
                            <div class="author-book">
                                <h3 class="text-c">授权书</h3>
                                <p class="book-content">
                                    今授权上海沪东拍卖有限公司，对报案号_______________
                                    的保险损余物品标的物进行处置，相关资料（物品清单、相关描述、质量和瑕疵等）均已如实在平台上提供，并已递交物权人_____________ 进行确认。
                                </p>
                                <p class="book-content">
                                    拍卖处置方式由物权人与上海沪东拍卖有限公司签订授权书。
                                </p>
                                <p class="book-content">本授权期限至此标的物处置结束止。</p>
                                <p class="book-stamp"> 授权单位（盖章）</p>
                                <p class="book-signature">授权人（签字）</p>
                            </div>
                            <p class="size-65 text-c" style="padding:.2rem 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;">此授权书为格式文档,点击右上角分享打印盖章后上传</p>
                            <div class="bs-box-content-item border-b-none">
                                <p class="size-m">上传授权书</p>
                                <div class="uploader">
                                    <div class="uploader-content">
                                        <div class="uploader-input-box"><input type="file" accept="image/*" class="uploader-input"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="service-paper size-m" style="padding:.55rem;"><label><input type="checkbox"> <i></i> <span>注册代表您同意我们的<a class="red">《拍卖委托合同》</a></span></label></div>
                </div>
                <div class="btn-box" style="margin-top: 1rem;">
                    <div class="my-btn" v-if="currentStep===0" @click="nextStep">
                        <span class="active">下一步</span>
                    </div>
                    <div v-if="currentStep>0&&currentStep<5" class="flex">
                        <div class="pre-step my-btn" style="width:47%;" @click="preStep">
                            <span style="background-color: #fff;color:#000;">上一步</span>
                        </div>
                        <div class="pre-step my-btn" style="width:47%" @click="nextStep">
                            <span class="active">下一步</span>
                        </div>
                    </div>
                    <div v-if="currentStep===5" class="flex">
                        <div class="pre-step my-btn" style="width:47%;" @click="preStep">
                            <span style="background-color: #fff;color:#000;">上一步</span>
                        </div>
                        <div class="pre-step my-btn" style="width:47%" @click="preStep">
                            <span class="active">递交审核</span>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <script type='text/javascript' src='../lib/sui/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../lib/sui/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../lib/sui/sm-extend.min.js' charset='utf-8'></script>
    <script type='text/javascript' src="../lib/vue/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#filerecord',
            data: {
                phone: "18638779089",
                password: "123478",
                encode: true,
                steps: [
                    {
                        name: '保单险种',
                        index: 0,
                    },
                    {
                        name: '货品信息',
                        index: 1,
                    },
                    {
                        name: '货品受损',
                        index: 2,
                    },
                    {
                        name: '货品现状',
                        index: 3,
                    },
                    {
                        name: '物权信息',
                        index: 4,
                    },
                    {
                        name: '递交授权',
                        index: 5,
                    }
                ],
                currentStep: 0
            },
            methods: {
                getStepWidth: function () {
                    return document.body.clientWidth / this.steps.length + 'px'
                },
                getStepActive: function () {
                    let className = ''
                    for (var i = 0; i < this.steps.length; i++) {
                        if (this.steps[i].index <= this.currentStep) {
                            className = 'step-item selected'
                        } else {
                            className = 'step-item'
                        }
                    }
                    console.log('className', className)
                    return className
                },
                nextStep: function () {
                    this.currentStep++
                    if (this.currentStep >= 5) {
                        return
                    }
                },
                preStep: function () {
                    this.currentStep--
                    if (this.currentStep <= 0) {
                        return
                    }
                }
            },
        })
        $("#picker").picker({
      toolbarTemplate: '<header class="bar bar-nav">\
        <button class="button button-link pull-left">\
      按钮\
      </button>\
      <button class="button button-link pull-right close-picker">\
      确定\
      </button>\
      <h1 class="title">标题</h1>\
      </header>',
      cols: [
        {
          textAlign: 'center',
          values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus'],
          displayValues:[1,2,3,4,5,6],
          cssClass: 'picker-items-col-normal'
        }
      ],
      onClose:function(obj){
          console.log('valuevaluevalue',obj.value)
      }
    });
    </script>
</body>

</html>